<template>
	<view class="content">
		<u-sticky>
			<!-- 搜索框 -->
			<view class="header padding ffffff" :style="{paddingTop:80+'rpx'}">
				<view class="searchBox">
					<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					<view class="margin_left1" style="margin-top: 2rpx;">
						<u-icon name="arrow-down-fill" color="#595959" size="12"></u-icon>
					</view>
					<input class="searchInput" placeholder-class="searchPlaceholder" type="text" placeholder="搜索关键字"
						confirm-type="search" @confirm="init" v-model="keyword">
				</view>
				<view class="text_x margin_left3" style="color: #F3271C;" @click="init">搜索</view>
			</view>
		</u-sticky>
		<view class="padding">
			<!-- 服务 -->
			<view v-show="value==0">
				<view class="margin_bottom3">
					<view class="teacherBox" v-for="item in list.data" :key="item.id" @click="goServiceInfo(item.id)">
						<view class="left" v-if="item.user">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="name" v-if="item.user">{{item.user.nickname}}</view>
							<view class="flexbetween">
								<view class="price">￥{{item.price}}</view>
								<view class="button" @click.stop="connection(item)">聊一聊</view>
							</view>
						</view>
						<view class="trade" v-show="item.service_state">营业中</view>
						<view class="rest" v-show="!item.service_state">休息中</view>
					</view>
				</view>
			</view>
			<!-- 天商 -->
			<view v-show="value==1">
				<view class=" flexbetween flex_wrap">
					<view class="dayShop margin_top" v-for="item in list.data" :key="item.id"
						@click="goGoodsInfo(item.id)">
						<view class="imgBox">
							<image :src="item.image_text" mode="widthFix"></image>
						</view>
						<view class="yihang text_a color_san margin_top">{{item.name}}</view>
						<view class="flexleft margin_top">
							<view class="text_c" style="color: #F3271C;margin-right: 20rpx;">￥{{item.price}}</view>
							<view class="color_jiu text_pee">已拼{{item.sale_num}}件</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				systemBarHeight: "",
				keyword: "",
				value: 0,
				range: [{
					value: 0,
					text: "服务"
				}, {
					value: 1,
					text: "天商"
				}],
				page: 1,
				list: {
					data: []
				},
			}
		},
		onLoad() {
			this.systemBarHeight = getApp().globalData.systemBarHeight * 2 + 40
			this.init()
		},
		methods: {
			change(e) {
				this.list.data = []
				this.init()
			},
			async init(isPage, page) {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let _this = this;
				let url = "/api/service/getlist"
				let data = {
					keyword: this.keyword,
					page: page || 1
				}
				if (this.value == 0) { //服务
					url = "/api/service/getlist"
				} else { //天商
					url = "/api/goods/getlist"
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
						_this.isGetInit = true
						_this.pageShow = true
						console.log(_this.list.data, "list.data")
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			goServiceInfo(id) { //服务详情
				uni.navigateTo({
					url: "/pages_index/serviceInfo?id=" + id
				})
			},
			goGoodsInfo(id) { //商品详情
				uni.navigateTo({
					url: "/pages_index/goodsInfo?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// padding: 30rpx;
		background-color: #FAFAFA;
		box-sizing: border-box;
	}

	// 搜索框
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.searchBox {
		padding: 15rpx 30rpx;
		background: #F3F3F3;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		flex: 1;

		.searchInput {
			margin-left: 20rpx;
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}

		.searchPlaceholder {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}
	}

	::v-deep.uni-icons,
	.uniui-clear {
		display: none;
	}

	::v-deep.uni-stat__select {
		width: 50rpx;
		max-width: 50rpx;
		min-width: 50rpx;
		border: none;
		margin-right: 20rpx;
	}

	::v-deep.uni-select {
		width: 160rpx;
		max-width: 160rpx;
		min-width: 160rpx;
		border: none;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	// 服务
	.teacherBox {
		background-color: #ffffff;
		padding: 36rpx 15rpx 36rpx 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		position: relative;

		.left {
			width: 152rpx;
			height: 152rpx;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			margin-right: 30rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;

			.name {
				font-size: 30rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #000000;
			}

			.price {
				font-size: 26rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #F3271C;
			}

			.button {
				padding: 10rpx 35rpx;
				text-align: center;
				border: 2rpx solid rgba(243, 39, 28, 1);
				border-radius: 39rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #F3271C;
			}
		}

		// 营业中
		.trade {
			background: rgba(19, 196, 99, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #13C463;
			position: absolute;
			top: 0;
			right: 0;
		}

		// 休息中
		.rest {
			background: rgba(255, 138, 2, .1);
			border-radius: 0rpx 14rpx 0rpx 14rpx;
			padding: 7rpx 25rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FF8A02;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	// 天商
	.dayShop {
		.imgBox {
			width: 338rpx;
			height: 338rpx;
			border-radius: 11rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>